<template>
  <view class="content">
    <view class="content-view" style='height:320rpx;'>
      <view class="netname">
        <text style='width: 450rpx;font-size: 36rpx;color:#3a3a3a;'>{{dataDetail.name}}</text>
        <view class="net_right">
          <image @click="distance()" src="../../static/fly.png" style='width: 35rpx;height:35rpx;'></image>
          <text v-if="dataDetail.isOnline==1">{{caculateLL(dataDetail.lat,dataDetail.lng,coord.lat,coord.lng) | toFixed}}</text>
          <text v-else>0km</text>
        </view>

      </view>
      <text>{{dataDetail.address}}</text>
      <text>联系人：{{dataDetail.chargingNetwork.contact}}</text>
      <text style='color:#858585;width: 508rpx;'>电话：{{dataDetail.chargingNetwork.contactPhone}}</text>
      <text @click="dial" style='width:55rpx;font-size: 26rpx;color:#4ea7ff'>拨打</text>
      <image @click="dial" src='../../static/dial.png' style='width: 35rpx;height:35rpx;'></image>
    </view>
  </view>
</template>

<script>
  import {
    chargingCabinet
  } from '@/api/equip.js';
  import {
    caculateLL
  } from '@/common/main.js'
  export default {
    data() {
      return {
        code: '', //充电柜编码
        dataDetail: {},
        coord: {
          lat: '',
          lng: ''
        },
        caculateLL: caculateLL,
        details: {
          name: '',
          distance: '',
          address: '',
          linkMan: '',
          linkManPhone: ''
        }
      }
    },
    onLoad(options) {
      this.code = options.code;
      this.coord.lat = options.lat;
      this.coord.lng = options.lng;
      this.getDataList();
    },
    filters: {
      toFixed(str) {
        if (!str) return;
        let count = str > 1000 ? ((str / 1000).toFixed(2) + 'km') : (str.toFixed(2) + 'm');
        return count;
      }
    },
    methods: {
      getDataList() {
		this.$Toast.loading('加载中');
        chargingCabinet('/selectAllData', 'get', {
          code: this.code
        }).then(res => {
          uni.hideLoading();
          if (res.code == 200 ) {
            this.dataDetail = res.data;
          }
        })
      },
      dial() {
        uni.makePhoneCall({
          phoneNumber: this.dataDetail.chargingNetwork.contactPhone,
          fail: (err) => {
            console.log(err)
          }
        })
      },
      // 导航
      distance() {
        uni.getLocation({
          type: 'gcj02', //返回可以用于uni.openLocation的经纬度
          success: function(res) {
            const latitude = res.latitude;
            const longitude = res.longitude;
            uni.openLocation({
              latitude: latitude, //维度
              longitude: longitude, //经度
              name: "金石工业园", //目的地定位名称
              scale: 15, //缩放比例
              address: "石家庄市桥西区新市北路158号金石工业园", //导航详细地址
              success: function() {
                console.log('success');
              }
            });
          }
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/static/css/common.scss";

  .netname {
    @include flexLayout(center, space-between);
    .net_right{
      @include flexLayout(center, flex-start);
      image{
        margin: 12rpx;
      }
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .content-view {
    width: 670rpx;
    margin: 20rpx 10px;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 15rpx;
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
    padding: 33rpx 0rpx 0rpx 40rpx;
  }

  text {
    font-size: 26rpx;
    color: #858585;
    width: 608rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
